<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 提醒设置</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="back" data-nav="habit-detail.html">
        <i class="fas fa-chevron-left"></i> 返回
      </div>
      <div class="title">提醒设置</div>
      <div class="action" id="saveReminders">
        保存
      </div>
    </div>
    
    <div class="screen-container">
      <div class="card">
        <div class="habit-header">
          <i class="fas fa-spa text-primary"></i>
          <h3>晨间冥想</h3>
        </div>
      </div>
      
      <!-- Main Reminder -->
      <div class="card">
        <h3>主要提醒</h3>
        
        <div class="flex flex-between mb-10">
          <div>
            <p>启用提醒</p>
          </div>
          <label class="switch">
            <input type="checkbox" id="mainReminder" checked>
            <span class="slider"></span>
          </label>
        </div>
        
        <div id="mainReminderSettings">
          <div class="form-group">
            <label class="form-label" for="reminderTime">提醒时间</label>
            <input type="time" class="form-control" id="reminderTime" value="06:30">
          </div>
          
          <div class="form-group">
            <label class="form-label">重复</label>
            <div class="weekday-selector">
              <div class="weekday-option selected">一</div>
              <div class="weekday-option selected">二</div>
              <div class="weekday-option selected">三</div>
              <div class="weekday-option selected">四</div>
              <div class="weekday-option selected">五</div>
              <div class="weekday-option selected">六</div>
              <div class="weekday-option selected">日</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="reminderSound">提醒声音</label>
            <select class="form-control" id="reminderSound">
              <option value="bell">铃声</option>
              <option value="chime" selected>风铃</option>
              <option value="zen">禅声</option>
              <option value="drop">水滴</option>
              <option value="nature">自然</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="reminderMessage">提醒消息</label>
            <input type="text" class="form-control" id="reminderMessage" value="是时候进行晨间冥想了！">
          </div>
        </div>
      </div>
      
      <!-- Missed Reminder -->
      <div class="card">
        <h3>未完成提醒</h3>
        
        <div class="flex flex-between mb-10">
          <div>
            <p>习惯未完成提醒</p>
            <p class="text-secondary">如果到设定时间还未完成习惯，会再次提醒</p>
          </div>
          <label class="switch">
            <input type="checkbox" id="missedReminder" checked>
            <span class="slider"></span>
          </label>
        </div>
        
        <div id="missedReminderSettings">
          <div class="form-group">
            <label class="form-label" for="missedTime">提醒间隔</label>
            <select class="form-control" id="missedTime">
              <option value="30">30分钟后</option>
              <option value="60" selected>1小时后</option>
              <option value="120">2小时后</option>
              <option value="evening">当天晚上</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="maxReminders">最大提醒次数</label>
            <select class="form-control" id="maxReminders">
              <option value="1">1次</option>
              <option value="2" selected>2次</option>
              <option value="3">3次</option>
              <option value="0">不限</option>
            </select>
          </div>
        </div>
      </div>
      
      <!-- Streak Protection -->
      <div class="card">
        <h3>连续记录保护</h3>
        
        <div class="flex flex-between mb-10">
          <div>
            <p>连续记录即将中断提醒</p>
            <p class="text-secondary">当习惯即将中断连续时额外提醒</p>
          </div>
          <label class="switch">
            <input type="checkbox" id="streakReminder" checked>
            <span class="slider"></span>
          </label>
        </div>
        
        <div id="streakReminderSettings">
          <div class="form-group">
            <label class="form-label" for="streakReminderTime">提醒时间</label>
            <select class="form-control" id="streakReminderTime">
              <option value="21:00" selected>晚上9:00</option>
              <option value="22:00">晚上10:00</option>
              <option value="custom">自定义...</option>
            </select>
          </div>
        </div>
      </div>
      
      <!-- Celebration -->
      <div class="card">
        <h3>里程碑庆祝</h3>
        
        <div class="flex flex-between mb-10">
          <div>
            <p>里程碑提醒</p>
            <p class="text-secondary">达到特定连续天数时提醒庆祝</p>
          </div>
          <label class="switch">
            <input type="checkbox" id="milestoneReminder" checked>
            <span class="slider"></span>
          </label>
        </div>
        
        <div id="milestoneReminderSettings">
          <div class="milestone-selector">
            <div class="milestone-option selected">7天</div>
            <div class="milestone-option selected">21天</div>
            <div class="milestone-option selected">30天</div>
            <div class="milestone-option selected">60天</div>
            <div class="milestone-option selected">100天</div>
            <div class="milestone-option">180天</div>
            <div class="milestone-option">365天</div>
          </div>
        </div>
      </div>
      
      <!-- Smart Reminder -->
      <div class="card">
        <h3>智能提醒</h3>
        
        <div class="flex flex-between mb-10">
          <div>
            <p>智能提醒时间</p>
            <p class="text-secondary">根据您的习惯完成情况自动调整最佳提醒时间</p>
          </div>
          <label class="switch">
            <input type="checkbox" id="smartReminder">
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="text-center mt-10">
          <p class="text-primary">开启后应用将分析您的习惯模式，自动调整提醒时间</p>
        </div>
      </div>
      
      <!-- Do Not Disturb -->
      <div class="card">
        <h3>勿扰模式</h3>
        
        <div class="form-group">
          <label class="form-label">勿扰时段</label>
          <div class="time-range">
            <input type="time" class="form-control" value="22:00">
            <span class="time-separator">至</span>
            <input type="time" class="form-control" value="07:00">
          </div>
          <p class="text-secondary">在此时段内不会发送提醒</p>
        </div>
      </div>
      
      <div class="mt-20 mb-20">
        <button id="saveRemindersBtn" class="btn btn-primary btn-block">保存设置</button>
      </div>
    </div>
  </div>

  <style>
    /* Reminder specific styles */
    .habit-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .habit-header i {
      font-size: 30px;
    }
    
    .weekday-selector {
      display: flex;
      gap: 5px;
      margin: 10px 0;
    }
    
    .weekday-option {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .weekday-option.selected {
      background-color: var(--primary-color);
      color: white;
    }
    
    .milestone-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 10px 0;
    }
    
    .milestone-option {
      padding: 8px 15px;
      border-radius: 20px;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
    }
    
    .milestone-option.selected {
      background-color: var(--primary-color);
      color: white;
    }
    
    .time-range {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .time-separator {
      color: var(--text-secondary);
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Toggle main reminder settings
      const mainReminder = document.getElementById('mainReminder');
      const mainReminderSettings = document.getElementById('mainReminderSettings');
      
      mainReminder.addEventListener('change', function() {
        mainReminderSettings.style.display = this.checked ? 'block' : 'none';
      });
      
      // Toggle missed reminder settings
      const missedReminder = document.getElementById('missedReminder');
      const missedReminderSettings = document.getElementById('missedReminderSettings');
      
      missedReminder.addEventListener('change', function() {
        missedReminderSettings.style.display = this.checked ? 'block' : 'none';
      });
      
      // Toggle streak reminder settings
      const streakReminder = document.getElementById('streakReminder');
      const streakReminderSettings = document.getElementById('streakReminderSettings');
      
      streakReminder.addEventListener('change', function() {
        streakReminderSettings.style.display = this.checked ? 'block' : 'none';
      });
      
      // Toggle milestone reminder settings
      const milestoneReminder = document.getElementById('milestoneReminder');
      const milestoneReminderSettings = document.getElementById('milestoneReminderSettings');
      
      milestoneReminder.addEventListener('change', function() {
        milestoneReminderSettings.style.display = this.checked ? 'block' : 'none';
      });
      
      // Weekday selector
      const weekdayOptions = document.querySelectorAll('.weekday-option');
      weekdayOptions.forEach(option => {
        option.addEventListener('click', function() {
          this.classList.toggle('selected');
        });
      });
      
      // Milestone selector
      const milestoneOptions = document.querySelectorAll('.milestone-option');
      milestoneOptions.forEach(option => {
        option.addEventListener('click', function() {
          this.classList.toggle('selected');
        });
      });
      
      // Save reminders
      document.getElementById('saveReminders').addEventListener('click', function() {
        document.getElementById('saveRemindersBtn').click();
      });
      
      document.getElementById('saveRemindersBtn').addEventListener('click', function() {
        // In a real app, this would save the reminder settings
        window.location.href = 'habit-detail.html';
      });
    });
  </script>
  
  <script src="js/app.js"></script>
</body>
</html>
